import { Checkbox } from '@arco-design/web-react';
import { omit } from 'lodash';
import { memo, useCallback, useMemo } from 'react';
import { Cell } from './Cell';
import styles from './Cell.module.scss';
import { ColFixeds, FocusCell, IColumn } from './types';

interface IProps {
  /** 列配置 */
  columns: IColumn<any>[];
  /** 数据 */
  data: any;
  /** 聚焦状态 */
  focus?: FocusCell;
  /** 行索引 */
  index: number;
  /** 单元格点击 */
  onCellClick: (index: number, colKey: string | number, isDbClick?: boolean) => void;
  /**
   * 单元格输入触发，input输入值改变时触发
   * @param dataRow 当前渲染的数据行
   * @param dataKey 数据的key
   * @param val 编辑输入框的值
   * @returns
   */
  onCellChange?: (dataRow: number, dataKey: string | number, val: any, rowKey: any) => void;
  /**
   * 单元格失去焦点时触发
   * @param dataRow 当前渲染的数据行
   * @param dataKey 数据的key
   * @param val 编辑输入框的值
   * @returns
   */
  onBlur?: (dataRow: number, dataKey: string | number, val: any, rowKey: any) => void;
  /** 固定列配置 */
  colFixed: ColFixeds;
  /** 展示选中列 */
  showCheckbox?: boolean;
  /** 选中 */
  selected?: boolean;
  /** 选中回调 */
  onChecked?: (key: string, checked: boolean) => void;
  /** 移除聚焦单元格 */
  onEditBlur?: () => void;
  /** 选中的ID */
  selectedId?: string;
  /** checkbox属性 */
  checkboxProps?: any;
}

/**
 * 表格行
 */
const Row = memo((props: IProps) => {
  const { showCheckbox, selected, onChecked, selectedId, checkboxProps, onEditBlur } = props;

  const contentProps = useMemo(() => omit(props, ['showCheckbox', 'selected']), [props]);
  const checkHandler = useCallback((checked: boolean) => {
    onChecked?.(selectedId!, checked);
  }, [onChecked, selectedId]);

  return (
    <tr>
      {
        showCheckbox ? (
          <td key='checkbox' className={styles.cell}>
            <Checkbox onChange={checkHandler} checked={selected} {...checkboxProps} />
          </td>
        ) : null
      }
      <RowContent {...contentProps} />
    </tr>
  );
});

const RowContent = memo((props: IProps) => {
  const { data, columns, focus, index, onCellClick, onCellChange, colFixed, onBlur, onEditBlur } = props;

  return (
    <>
      {columns.map((col, idx) => {
        const value = col.dataIndex ? (data as any)[col.dataIndex] : undefined;
        let renderVal = col.render ? col.render(value, data, index) : value;
        const isfocus = focus ? focus.colKey === col.key : false;
        const isEdit = focus && isfocus ? focus.edit : false;
        const extraContent = col.extra
          ? typeof col.extra === 'function'
            ? col.extra(value, data, index) : data[col.extra]
          : '';
        const extraContent2 = col.extra2
          ? typeof col.extra2 === 'function'
            ? col.extra2(value, data, index) : data[col.extra2]
          : '';
        const editable = col.editable
          ? typeof col.editable === 'function'
            ? col.editable(value, data, index) : col.editable
          : false;
        return <Cell
          key={col.key}
          extraContent={extraContent}
          extraContent2={extraContent2}
          index={index} column={col}
          onCellChange={onCellChange}
          onCellClick={onCellClick}
          onEditBlur={onEditBlur}
          edit={isEdit}
          editable={editable}
          focus={isfocus}
          value={renderVal == undefined ? '' : renderVal}
          dataValue={value == undefined ? '' : value}
          data={data}
          colFixed={colFixed}
          onBlur={onBlur}
        />;
      })}
    </>
  );
});

export { Row };
